<template>
    <div style=" font-size:12px;line-height: 60px; display: flex;">
        <div style="flex: 1; font-size: 20px;">
            <span :class="collapseBtnClass" style="cursor: pointer;line-height: 20px" @click="collapse1"></span>
            <!-- 页签 -->
            <el-breadcrumb separator="/" style="display: inline-block;margin-left: 10px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>
                <!--<el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>-->
            </el-breadcrumb>
        </div>
        <el-dropdown style="cursor: pointer;">
            <div style="height: 60px;margin: auto 5px">
                <el-avatar style="flex: 1;margin: 10px 0;position: relative" :size="40" fit="contain"
                           @error="errorHandler"
                           alt="头像">
                    <img :src="user.avatar">
                </el-avatar>
                <i class="el-icon-arrow-down" ></i>
            </div>

            <el-dropdown-menu style="text-align: center;">
                <div style="width: 150px;height: auto;">
                    <el-dropdown-item style="font-size: 14px;padding: 5px 0">
                        <span>{{user.nickname}}</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/person" style="text-decoration-line: none;color: black">个人信息</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <!--<router-link to="/login" style="text-decoration-line: none">退出</router-link>-->
                        <span @click="logout">退出</span>
                    </el-dropdown-item>
                </div>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data() {
            return {

            }
        },
        props: {
            collapseBtnClass: String,
            user: Object,
            //collapse: Function,//方法一，添加自定义属性
        },
        computed: {
            currentPathName() {
                return this.$store.state.currentPathName;//需要监听的数据
            }
        },
        watch: {//监听路由
            /*'$route':function () {
                //取出route里设置的路由消息
                this.currentPathName=localStorage.getItem("currentPathName")
            }*/
            currentPathName(newVal, oldVal) {
                //console.log("newVal"+newVal)
            }
        },
        methods: {
            collapse1() {
                //this.$parent.$parent.$parent.collaspe();//通过4个$parent找到父组件，从而调用其折叠方法
                //调用父级manageView的asideCollapse方法
                this.$emit("asideCollapse");
            },
            logout() {
                this.$message.success("退出成功");
                this.$store.commit("logout");
            },
            errorHandler() {
                return true
            }
        }
    }
</script>

<style scoped>

</style>